<template>
	<Layout class="p-5 bg-white">
		<Form >
			<h1 style="text-align: center;margin: 20px;">卖车发布</h1>
	 <div class="content">
		<div class="width1190">		
			<form action="#" style="margin-left: 200px;" method="get" class="pro-search">
				<table>
					<tbody>
          <tr>
            <th>归属地：</th>
            <td>
              <Input v-model="car.ownerShip" style="width:150px" placeholder="请输入车牌归属地"></Input>

            </td>
          </tr>
          <tr>
            <th>品牌：</th>
            <td>
              <Select  v-model="car.brandId" style="width:150px"  transfer>
                <Option v-for="item in brand" :value="item.brandId">{{ item.brandName }}</Option>
              </Select>
            </td>
          </tr>
          <tr>
            <th>型号：</th>
            <td>
              <Input v-model="car.type" style="width:150px" placeholder="请输入型号"></Input>
            </td>
          </tr>
          <tr>
            <th>价格：</th>
            <td>
              <Input v-model="car.sellPrice" style="width:150px" placeholder="请输入价格"></Input>

            </td>
          </tr>
						<tr>
							<th>车龄：</th>
							<td>
								<Input v-model="car.carCondition" style="width:150px" placeholder="请输入车龄"></Input>
							</td>
						</tr>
						<tr>
							<th>里程数：</th>
							<td>
								<Input v-model="car.mileage" style="width:150px" placeholder="请输入里程数"></Input>
							</td>
						</tr>





						<tr>
							<th>标题图片:</th>
							<td>
								<div v-if="car.imgUrl != ''">
								  <img
								    :src="car.imgUrl"
								    style="width:180px;height:120px"
								  />
								  <div class="demo-upload-list-cover">
								    <Icon
								      type="ios-trash-outline"
								      @click.native="handleRemove"
								    ></Icon>
								  </div>
								</div>
								<Upload
								  with-credentials
								  :max-size="2048"
								  :show-upload-list="false"
								  name="file"
								  ref="upload"
								  :format="['jpg', 'jpeg', 'png']"
								  :data="{ module: 'car', date: new Date() }"
								  :on-format-error="handleFormatError"
								  :on-exceeded-size="handleMaxSize"
								  :on-success="handleSuccess"
								  :action="url"
								>
								  <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
								    >上传</Button
								  >
								</Upload>上传其他图图片请提交后至个人中心的卖车修改页面上传
							</td>
						</tr>
          <tr>
            <th>电话号：</th>
            <td>
              <Input v-model="car.tel" style="width:150px" placeholder="请输入电话号"></Input>

            </td>
          </tr>
          <tr>
            <th>微信号：</th>
            <td>
              <Input v-model="car.wxNumber" style="width:150px" placeholder="请输入微信号"></Input>(非必填)

            </td>
          </tr>
						<tr>
							<th></th>
							<td>
								<Button @click="submit"   v-if="sub" type="primary" style="margin-right: 100px;">提交</Button>
								<Button @click="modal"  v-if="pay">支付</Button>
								    <Modal v-model="modal11"  title="支付">
								        <img :src="url"/>
								    </Modal>
								<Button @click="cancel" class="ml-2">取消</Button>
							</td>
						</tr>
					</tbody>
				</table>		
			</form>	
		</div>			
	</div>				
		 
		</Form>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {

        number:10,
        sub: false,
        pay: false,
				orderInfo : {

        },
				currentUser:{},
				iport:'',
				url:'',
				proviences : [],
				citys : [],
				regins : [],
				modal11:false,
				// imgUrlList:[],
				// imgList:[],
				// img:'',
				// imgs:'',
				car:{
					carCondition: null,
					mileage: null,
					brandId: null,
					type: "",
					imgUrl:"",
					ownerShip:'',
					tel:"",
					wxNumber:'',
					sellPrice:null,
					clientId: '',
				},
				styleList: [{
						value: '三厢车',
						label: '三厢车'
					},
					{
						value: '两厢车',
						label: '两厢车'
					},
					{
						value: 'SUV',
						label: 'SUV'
					},
					{
						value: '掀背车',
						label: '掀背车'
					},
					{
						value: '跑车',
						label: '跑车'
					},
					{
						value: 'MPV',
						label: 'MPV'
					},
					{
						value: '敞篷车',
						label: '敞篷车'
					},
					{
						value: '旅行车',
						label: '旅行车'
					},
					{
						value: '皮卡',
						label: '皮卡'
					},
					{
						value: '客车',
						label: '客车'
					},
					{
						value: '货车',
						label: '货车'
					}
				],
				brand:[],
				
			}
		},
		methods: {
			//图片上传时文件格式错误方法
			handleFormatError(file) {
			  this.$Notice.warning({
			    title: '文件格式不正确',
			    desc:
			      '文件 ' +
			      file.name +
			      ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
			  })
			},
			//校验图片的大小，不能大于2M
			handleMaxSize: function(file) {
			  this.$Modal.info({
			    title: '超出文件大小限制',
			    content: '文件 ' + file.name + ' 太大，不能超过 2M。',
			  })
			},
			handleRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.car.imgUrl = ''
			},
			//上传成功后的勾子 
			handleSuccess: function(response, file, fileList) {
				
			  this.$data.car.imgUrl = response.DATA.URL
			  console.log( this.$data.car.imgUrl)
			},
			
			ss:function(item){
				console.log(this.house)
			},
			getBrand() {
				this.http.get({
					url: "/brand/list",
					param: {}
				}).then(data => {
					this.$data.brand = data
				});
			},
			
			submit: function() {
        if(this.$data.car.tel === ""){
          this.message.error("电话必须输入");
          return;
        }
				if (this.$data.car.name === "") {
					this.message.error("车名必须输入");
					return;
				}
				if (this.$data.car.brandId === null) {
					this.message.error("品牌必须输入");
					return;
				}
				if (this.$data.car.mileage === null) {
					this.message.error("里程必须输入");
					return;
				}
				if (this.$data.car.carCondition === null) {
					this.message.error("车龄必须输入");
					return;
				}
				if (this.$data.car.type === "") {
					this.message.error("车型必须输入");
					return;
				}
				let self = this;
				this.http.post({
					url: "/car-sell-info/info",
					param: {
						mileage: this.$data.car.mileage,
						brandId: this.$data.car.brandId,
						carCondition: this.$data.car.carCondition,
						type: this.$data.car.type,
						ownerShip:this.$data.car.ownerShip,
						imgUrl:this.$data.car.imgUrl,
						sellPrice:this.$data.car.sellPrice,
						tel:this.$data.car.tel,
						wxNumber:this.$data.car.wxNumber,
						clientId: this.$data.car.clientId,
					}
				}).then(data => {
					self.message.info("新增成功");
          this.http.put({
            url: "/pay-order/info/caozuo",
            param: {
              orderNumber:this.orderInfo.orderNumber
            }
          })
					this.cancel()
				});
			},
			cancel: function() {
				this.$router.push({
					name: "user_center_car_sale",
					params: {}
				});
			},
      getOrderStatu: function () {
        console.log(this.$data.number);
        this.number--;
        if(this.number === 0){
          clearInterval(this.longSearch)
          this.modal11 = false
          this.number = 10
          this.$Notice.error({
            title: '支付超时',
          });
        }
        //发请求查询支付状态
        this.http.get({
          url: "/pay-order/info",
          param: {
            orderNumber:this.orderInfo.orderNumber
          }
        }).then(data => {
          console.log("支付状态" + data);
          if(data == 2) {
            this.modal11 = false
            clearInterval(this.longSearch)
            this.pay = false
            this.sub = true
            this.$Notice.success({
              title: '支付成功',
            });
          }
        })
      },
			modal:function(){
        clearInterval(this.longSearch)
        this.number = 10
				this.modal11 = true
				this.url = this.iport +'pay/nativeV2?clientId='+this.$data.orderInfo.clientId
				+'&orderTypeId='+this.$data.orderInfo.orderTypeId
				+'&money='+this.$data.orderInfo.price
				+'&orderNumber='+this.$data.orderInfo.orderNumber
        this.longSearch = setInterval(this.getOrderStatu,3000)
			}
		},
    beforeRouteLeave(to,from,next){
      this.$destroy();
      next();
    },
		created: function() {
      this.$data.currentUser = JSON.parse(sessionStorage.getItem('CURRENT'))
      this.$data.car.clientId = this.$data.currentUser.client.clientId
      console.log("this.$data.car.clientId" + this.$data.car.clientId)
      this.http.get({
        //查看已支付未操作的订单
        url:'/pay-order/list',
        param:{
          clientId:this.$data.car.clientId,
          orderTypeId:5,
        },
      }).then((data) => {
        this.$data.orderInfo = data;
        if(this.$data.orderInfo) {
          this.sub = true
        } else {
          this.http.post({
            //新增订单
            url:'/pay-order/info',
            param:{
              clientId:this.$data.car.clientId,
              orderTypeId:5,
            }
          }).then((data) => {
            this.$data.orderInfo = data
            this.pay = true
          })
        }
      })
			this.iport = this.store.state.iport
			this.url = this.iport + 'image/upload'
			this.getBrand();
			// var cli = this.local.session.getItem("CURRENT");
			// this.houseSell.clientId = cli.client.clientId;
		},
	}
</script>

<style >
</style>
